<template>
  <div>
    <el-row>
  <el-col :span="8">
    <div class="grid-content bg-purple">
    单程:  <span>{{flighsList.info.departCity}} - {{flighsList.info.destCity}}</span><span>/{{flighsList.info.departDate}}</span> 
    </div>
  </el-col>
  <el-col :span="16">
    <div class="grid-content bg-purple-light">
    <div>
    <el-select v-model="airportvalue" @change='runScreen' placeholder="起飞机场">
    <el-option
      v-for="(item,index) in flighsList.options.airport"
      :key="index"
      :label="item"
      :value="item"
      >
    </el-option>
  </el-select>
      </div>
    <div>
 <el-select v-model="flightvalue" @change="runScreen" placeholder="起飞时间">
    <el-option
      v-for="(item,index) in flighsList.options.flightTimes"
      :key="index"
      :label="`${item.from}:00 - ${item.to}:00`"
      :value="`${item.from},${item.to}`">
    </el-option>
  </el-select>
      </div>
      <div>
        <el-select v-model="companyvalue" @change="runScreen" placeholder="航空公司">
    <el-option
      v-for="(item,index) in flighsList.options.company"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
      </div>
      <div>
        <el-select v-model="typevalue" @change="runScreen" placeholder="机型">
    <el-option
      v-for="(item,index) in Sizeoptions"
      :key="index"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </div>
  </div>
  </el-col>
</el-row>
<div class='screen'>
  <span>筛选</span> :
  <span @click="cleaValue" class='screen-btn'>撤销</span>
</div>
  </div>
</template>

<script>
export default {
  props: {
    flighsList: Object,
    copyList: Array
  },
  data() {
    return {
      typevalue: '',
      companyvalue: '',
      flightvalue: '',
      airportvalue: '',
      Sizeoptions: [
        {
          label: '大',
          value: 'L'
        },
        {
          label: '中',
          value: 'M'
        },
        {
          label: '小',
          value: 'S'
        }
      ]
    }
  },
  methods: {
    // 之前的筛选器是单独向父组件请求改变数据 现在我们将所有的筛选器用一个事件绑定 所有的筛选器选好数据后再向父组件传递
    runScreen() {
      // 来源数据就是父组件传进来的 copyList 的深拷贝
      let newList = [...this.copyList]
      // 筛选机场
      if (this.airportvalue) {
        newList = newList.filter(item => {
          return item.org_airport_name == this.airportvalue
        })
      }
      // 筛选机型
      if (this.typevalue) {
        newList = newList.filter(item => {
          return item.plane_size == this.typevalue
        })
      }
      // 筛选公司
      if (this.companyvalue) {
        newList = newList.filter(item => {
          return item.airline_name == this.companyvalue
        })
      }
      // 筛选时间
      if (this.flightvalue) {
        newList = newList.filter(item => {
          const flightDepHour = Number(item.dep_time.split(':')[0])
          // 航班出发的时间
          const fromHourSelected = Number(this.flightvalue.split(',')[0])
          // 航班到达的时间
          const toHourSelected = Number(this.flightvalue.split(',')[1])
          // 选择航班时间 返回的是要大于等于我们的出发时间 并且出发时间不能晚于我们的选择的最晚出发时间
          return (
            flightDepHour >= fromHourSelected && flightDepHour < toHourSelected
          )
        })
      }
      this.$emit('setFlightsList', newList)
    },
    // 清除筛选内容
    cleaValue() {
      this.$emit('setFlightsList', this.copyList)
      this.typevalue = ''
      this.companyvalue = ''
      this.flightvalue = ''
      this.airportvalue = ''
    }
    // handlePort() {
    //   // console.log(value)
    //   console.log(this.airportvalue)

    //   this.$emit('setFlightsList', newData)
    // },
    // // 筛选机场
    // handleCompany() {
    //   const newData = this.copyList.filter(item => {
    //     return item.airline_name == this.companyvalue
    //   })
    //   this.$emit('setFlightsList', newData)
    // },
    // // 筛选机型
    // handleType() {
    //   const newData = this.copyList.filter(item => {
    //     return item.plane_size == this.typevalue
    //   })
    //   this.$emit('setFlightsList', newData)
    // },
    // // 筛选时间
    // handleTime() {
    //   console.log(this.flightvalue)

    //   const newData = this.copyList.filter(item => {
    //     const flightDepHour = item.dep_time.split(':')[0]
    //     // 航班出发的时间
    //     const fromHourSelected = this.flightvalue.split(',')[0]
    //     // 航班到达的时间
    //     const toHourSelected = this.flightvalue.split(',')[1]
    //     // 选择航班时间 返回的是要大于等于我们的出发时间 并且出发时间不能晚于我们的选择的最晚出发时间
    //     return
    //       flightDepHour >= fromHourSelected && flightDepHour < toHourSelected

    //   })
    //   this.$emit('setFlightsList', newData)
    // }
  }
}
</script>

<style lang="scss" scoped>
.bg-purple-light {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  ::v-deep.el-select__caret {
    line-height: 0;
  }
  div {
    padding: 0 3px;
    display: flex;
    align-items: center;
  }
  ::v-deep.el-input__inner {
    height: 30px;
  }
}
.bg-purple {
  height: 40px;
  display: flex;
  align-items: center;
}
.screen {
  margin: 10px 0 20px;
  font-size: 14px;
  .screen-btn {
    padding: 4px 15px;
    background-color: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 10px;
    font-size: 12px;
    color: #409eff;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>